
<style>
    .m_tab{margin-bottom: 10px;}
    .m_tab a{color:#000;}
    .m_tab .tb{display: inline-block;background-color: #fff; padding: 5px 10px;cursor:pointer; margin-right: 5px;}
    .m_tab .tb:hover{color:rgba(26, 188, 156, 1);}
    .m_tab .curr{background-color: rgba(26, 188, 156, 1);color:#fff;}
    .m_tab .curr:hover{color: #fff;}
</style>

<div class="m_tab">
    <a href="/users/{{$user_id}}"><span class="tb">用户详情</span></a>
    <a href="/users/{{$user_id}}/edit"><span class="tb">编辑资料</span></a>
    <a href="/users/parentDetail/{{$user_id}}"><span class="tb curr">家长身份</span></a>
    <div class="btn-group pull-right" style="margin-right: 5px;">
        <a href="/users" class="btn btn-sm btn-default" title="列表"><i class="fa fa-list"></i>
            <span class="hidden-xs">&nbsp;返回列表</span>
        </a>
    </div>
</div>


<div class="box box-solid">

    @foreach($data as $val)
        <div class="box-body child-{{$val->child_id}}">
            <div><span>孩子--{{$val->name_home}}</span></div>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>所在班级</th>
                    <th>所在学校</th>
                    <th>班主任</th>
                    <th>订阅时间</th>
                    <th>到期时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="tbody-{{$val->child_id}}">
                <tr class="tr-{{$val->child_id}}">
                    <td>
                        {{$val->name_home}}
                    </td>
                    <td>
                        {{$val->name}}
                    </td>
                    <td>
                        {{$val->school_name ?? $val->sch_name}}
                    </td>
                    <td>
                        {{$val->username}}
                    </td>
                    <td class="td_subscribe_time">
                        @if ($val->subscribe_status == 1 && $val->end_time > date('Y-m-d H:i:s', time()))
                            {{$val->subscribe_time}}
                        @else
                            未订阅
                        @endif
                    </td>
                    <td class="td_end_time">
                        {{$val->end_time}}
                    </td>
                    <td>
                        <div>
                            <a class="btn btn-default tiaozheng" data-toggle="modal" data-target="#editModal" data-user_id="{{$val->user_id}}" data-child_id="{{$val->child_id}}" data-class_id="{{$val->class_id}}" data-subscribe_id="{{$val->subscribe_id}}" data-start_time="{{@$val->subscribe_time}}" data-disabled="{{@$val->disabled}}" data-end_time="{{@$val->end_time}}"><i class="fa fa-edit"></i>调整</a>
                            <a class="btn btn-default file-delete" data-id="{{$val->child_id}}"><i class="fa fa-trash"></i>删除</a>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    @endforeach
</div>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">调整</h4>
            </div>
            <form id="child-update" class="form-horizontal">
                <div class="modal-body">
                    <input type="hidden" name="user_id" />
                    <input type="hidden" name="child_id" />
                    <input type="hidden" name="class_id" />
                    <input type="hidden" name="subscribe_id" />
                    <div class="form-group  ">
                        <label for="start_time" class="col-sm-2 control-label">订阅时间</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                <input style="width: 200px" type="text" id="start_time" name="start_time" value="" class="form-control start_time" placeholder="输入订阅时间">
                            </div>
                        </div>
                    </div>
                    <div class="form-group  ">
                        <label for="end_time" class="col-sm-2  control-label">到期时间</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                <input style="width: 200px" type="text" id="end_time" name="end_time" value="" class="form-control end_time" placeholder="输入到期时间">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary btn-sm">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script data-exec-on-popstate>
    $(function () {
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);

            var user_id = button.data('user_id');
            var child_id = button.data('child_id');
            var class_id = button.data('class_id');
            var subscribe_id = button.data('subscribe_id');
            var start_time = button.data('start_time');
            var end_time = button.data('end_time');
            var disabled = button.data('disabled');

            var modal = $(this);

            modal.find('[name=user_id]').val(user_id);
            modal.find('[name=child_id]').val(child_id);
            modal.find('[name=class_id]').val(class_id);
            modal.find('[name=subscribe_id]').val(subscribe_id);

            if( start_time == "" || start_time == null){
                start_time = "{{date('Y-m-d H:i:s',time())}}";
            }
            modal.find('[name=start_time]').val(start_time);
            modal.find('[name=end_time]').val(end_time);

            if (disabled){
                modal.find('[name=start_time]').attr('readonly','readonly')
            } else {
                modal.find('[name=start_time]').removeAttr('readonly');
            }
        });

        $('.file-delete').click(function () {
            var id = $(this).data('id');

            swal({
                title: "{{ trans('admin.delete_confirm') }}",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "{{ trans('admin.confirm') }}",
                cancelButtonText: "{{ trans('admin.cancel') }}"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        method: 'post',
                        url: '/users/delChild',
                        data: {
                            id:id,
                            _token:LA.token,
                        },
                        success: function (data) {
                            if (typeof data === 'object') {
                                if (data.status) {
                                    if ($('.tbody-'+id + ' > tr').length > 1){
                                        $('.tr-'+id).remove();
                                    } else {
                                        $('.child-'+id).remove();
                                    }

                                    swal(data.message, '', 'success');
                                } else {
                                    swal(data.message, '', 'error');
                                }
                            }
                        }
                    });
                }
            });
        });


        $('.start_time').parent().datetimepicker({"format":"YYYY-MM-DD HH:mm:ss","locale":"zh-CN","allowInputToggle":true});
        $('.end_time').parent().datetimepicker({"format":"YYYY-MM-DD HH:mm:ss","locale":"zh-CN","allowInputToggle":true});

        /*$(".end_time").on("dp.change", function (e) {
            $('.start_time').data("DateTimePicker").maxDate(e.date);
        });*/

        $('#child-update').on('submit', function (event) {

            event.preventDefault();

            var form = $(this);
            var user_id = form.find('[name=user_id]').val();
            var child_id = form.find('[name=child_id]').val();
            var class_id = form.find('[name=class_id]').val();
            var subscribe_id = form.find('[name=subscribe_id]').val();
            var start_time = form.find('[name=start_time]').val();
            var end_time = form.find('[name=end_time]').val();

            if (!start_time){
                swal('请选择订阅时间', '', 'error');
                return;
            }

            if (!end_time){
                swal('请选择到期时间', '', 'error');
                return;
            }

            var start = new Date(start_time.replace("-", "/").replace("-", "/"));
            var end = new Date(end_time.replace("-", "/").replace("-", "/"));
            if(end < start) {
                swal('到期时间必须大于订阅时间', '', 'error');
                return;
            }

            $.ajax({
                method: 'post',
                url: '/users/updateChild',
                data: {
                    user_id:user_id,
                    child_id:child_id,
                    class_id:class_id,
                    subscribe_id:subscribe_id,
                    start_time:start_time,
                    end_time:end_time,
                    _token:LA.token,
                },
                success: function (data) {
                    if (typeof data === 'object') {
                        if (data.status) {
                            $('.tr-'+child_id).find('.tiaozheng').data('start_time',start_time);
                            $('.tr-'+child_id).find('.tiaozheng').data('end_time',end_time);

                            $('.tr-'+child_id).find('.td_subscribe_time').text(start_time);
                            $('.tr-'+child_id).find('.td_end_time').text(end_time);

                            closeModal();
                            swal(data.message, '', 'success');
                        } else {
                            swal(data.message, '', 'error');
                        }
                    }
                }
            });
        });

        function closeModal() {
            $("#editModal").modal('toggle');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }
    });
</script>